import React, { useCallback, useRef } from 'react';
import { GTable } from 'geminis-react';
import { Button, Divider } from 'antd';
import styles from '../category/components/tree.less';
import { CategoryTree } from '@/pages/workflow/category/components/tree';

export default () => {
  const table = useRef<any>();

  const onTreeSelected = useCallback((selection: any) => {
    table.current.loadData({ category: selection.selectedNodes[0].data.pathId });
  }, [table]);

  const tableSchema = {
    headerTitle: '发起流程',
    data: {
      url: '/api/workflow/process/my',
    },
    manualRequest: true,
    action: {
      row: {
        render: (record: any) => [
          <Button
            type="link"
            onClick={() => {
              window.open(
                '/center/workflow/start?' +
                'processDefinitionKey=' +
                record.key +
                '&processDefinitionName=' +
                record.name,
              );
            }}
          >
            新建
          </Button>,
        ],
      },
    },
  };

  return (
    <div className={styles.main}>
      <div className={styles.tree}>
        <CategoryTree onSelected={onTreeSelected} />
      </div>
      <Divider type="vertical" className={styles.fullHeight} />
      <div className={styles.content}>
        <GTable
          ref={table}
          schema={tableSchema}
          schemaPath="/workflow-pc/schema/work/start.json"
        />
      </div>
    </div>
  );
};
